<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>记录详情</title>
  <link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css" media="all">
  <style>
    .fxOrderList-container {
      padding: 20px;
    }

    td[data-field="imgUrl"] div,
    td[data-field="negativeImgUrl"] div {
      height: 120px;
    }

    .lay-form {
      padding: 20px;
    }

    .fxOrderList-container {
      background-color: #fff;
    }

    .bar {
      display: flex;
      justify-content: flex-start;
      align-items: flex-end;
    }

    .searchInput {
      display: flex;
      align-items: flex-end;
    }

    .searchInput input {
      width: 200px;
    }

    .searchInput .layui-form-label {
      padding: 9px 0;
    }

    .bar .layui-form-label {
      padding: 0;
      padding-bottom: 4px;
      text-align: left;
    }

    .bar .layui-inline {
      margin-right: 20px;
    }

    .layui-table img {
      max-width: 200px;
      object-fit: contain;
    }

    .layui-table-cell {
      height: auto;
    }

    .goBack {
      cursor: pointer;
    }
  </style>
</head>

<body>
  <div class="fxOrderList-container">
    <div style="display: flex;align-items: center;font-size: 17px;"><i class="layui-icon layui-icon-left goBack"
        style="font-size: 30px; color: #333;"></i><span class="goBack">返回列表</span></div>
    <table lay-filter="fxOrderListTable" class="layui-hide" id="fxOrderListTable"></table>
  </div>

  <div id="help" style="display:none;padding: 10px;">
    <table class="layui-table">
      <colgroup>
        <col width="150">
        <col width="200">
        <col>
      </colgroup>
      <thead>
        <tr>
          <th>序号</th>
          <th>订单编号</th>
          <th>昵称</th>
          <th>互助金额(元)</th>
        </tr> 
      </thead>
      <tbody class="helpDetail">
      </tbody>
    </table>
  </div>

</body>


<!-- 操作 -->
<script type="text/html" id="helpMe">
  <a class="layui-btn layui-btn-xs" lay-event="helpme">查看详情</a>
</script>
<script type="text/html" id="meHelp">
  <a class="layui-btn layui-btn-xs" lay-event="mehelp">查看详情</a>
</script>


<script src="https://cdn.bootcdn.net/ajax/libs/layui/2.5.7/layui.all.min.js"></script>
<script src="../utils.js"></script>
<script>

 
  function GetQueryString(arg) {
    var reg = new RegExp("(^|&)" + arg + "=([^&]*)(&|$)");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) {
      return decodeURI(r[2]);
    }
    return null;
  };
  var orderId = GetQueryString('id'); 
  
  layui.use(['table', 'form', 'jquery', "laydate"], function () {
    var table = layui.table,
      form = layui.form,
      laydate = layui.laydate,
      $ = layui.jquery;
    form.render();
    table.render({
      elem: '#fxOrderListTable'
      , url: window.baseUrl + '/distribution/getOrderDetailForPc?orderId='+orderId
      , method: 'get'
      , headers: {
        Authorization: localStorage.token
      }
      , response: {
        statusCode: 200 //规定成功的状态码，默认：0
      }

      , request: {
        pageName: 'start' //页码的参数名称，默认：page
        , limitName: 'length' //每页数据量的参数名，默认：limit
      }
      , cols: [[
        { field: 'orderNo', title: '订单编号' }
        , { field: 'distributionName', title: '分销名称' }
        , { field: "bonusPoints", title: '赠送积分' }
        , {
          field: 'bonusPresentation', title: '赠送分红'}
        , {
          field: 'helpBonusPresentation',
          title: '互助分红金'
        }
        , { field: "payTypeName", title: '订单来源' }

        , { field: "payMoney", title: '价格' }
        , {
          field: 'upgradeMoney', title: '升级'
        }
        , {
          field: 'zhongJiMoney', title: '复投中级'
        }
        ,  {
          field: 'zhongJiOrderNo', title: '复投中级订单编号'
        }
        , {
          field: 'gaoJiMoney', title: '复投高级'
        }  ,{
          field: 'gaoJiOrderNo', title: '复投高级订单编号'
        }
        , {
          field: 'benefitMoney', title: '分红转收益'
        }
        , { title: '互助我的', toolbar: '#helpMe' }
        , { title: '我互助的', toolbar: '#meHelp' }
      ]],
      page: true
    });

    laydate.render({
      elem: '#test1'
      , range: true
    });

    table.on('tool(fxOrderListTable)', function (obj) {
      var data = obj.data;
      var layEvent = obj.event;
      if (layEvent === 'helpme') { //查看
        layer.open({
          type: 1,
          title: '互助我的',
          area: ['600px', '450px'],
          shadeClose: false,
          skin: 'yourclass',
          content: $("#help")
        });
        console.log(data.helpMeList,"==")
        var html = '';

        $(".helpDetail").html('');
        var helpMeListData = data.helpMeList;
        for ( var k in helpMeListData) {
          var item = helpMeListData[k];
          var index = parseInt(k)+1;
          html += '<tr><td>'+index+'</td><td>'+item.distributionOrderNo+'</td><td>'+item.userName+'</td><td>'+item.helpMoney+'</td></tr>'
        }

        
        $(".helpDetail").html(html);
      } else if (layEvent === 'mehelp') {
        layer.open({
          type: 1,
          title: '我互助的',
          area: ['600px', '450px'],
          shadeClose: false,
          skin: 'yourclass',
          content: $("#help")
        });
        var html = '';
        $(".helpDetail").html('');
        var meHelpListData = data.meHelpList;
        for ( var k in meHelpListData) {
          var item = meHelpListData[k];
          var index = parseInt(k)+1;
          html += '<tr><td>'+index+'</td><td>'+item.helpOrderNo+'</td><td>'+item.helpUserName+'</td><td>'+item.helpMoney+'</td></tr>'
        }

        $(".helpDetail").html(html);
      }
    });
    $(".goBack").on('click', function () {
      window.history.go(-1);
    })
  });
</script>

</html>